<script setup lang="ts">
import { AddIcon } from 'tdesign-icons-vue-next';
import { MessagePlugin, SuccessContext, UploadFailContext, UploadInstanceFunctions } from 'tdesign-vue-next';
import { nextTick, ref, watch } from 'vue';

import ImageView from '@/components/imageView/index.vue';

const props = defineProps({
  modelValue: {
    type: Object as any,
    default: () => {
      return { name: '', url: '' };
    },
  },
  item: {
    type: Object as any,
    default: () => {
      return {};
    },
  },
});

const emits = defineEmits(['update:modelValue']);

const uploadImageRef = ref<UploadInstanceFunctions>();
const imageViewRef = ref();
const imgUrl = ref('');

const uploadImageShow = ref(true);

const refresh = async () => {
  uploadImageShow.value = false;
  await nextTick();
  uploadImageShow.value = true;
};

const handleClickEdit = () => {
  uploadImageRef.value.triggerUpload();
};

const handleClickDelete = () => {
  imgUrl.value = '';
  emits('update:modelValue', '');
  refresh();
};

const handleSuccess = (context: SuccessContext) => {
  const { data } = context.response || {};
  const { url } = data || {};

  imgUrl.value = url;
  emits('update:modelValue', data);
  refresh();
};

const handleError = (context: UploadFailContext) => {
  MessagePlugin.error('文件上传失败');
  console.log('context', context);
  refresh();
};

watch(
  () => props.modelValue,
  (data) => {
    imgUrl.value = data.url;
  },
  { immediate: true },
);
</script>

<template>
  <div v-if="uploadImageShow" class="upload-image" :class="{ disabled: item.disabled }">
    <t-upload
      v-show="!imgUrl"
      ref="uploadImageRef"
      action="/api/v1/open/resources/"
      accept=".jpg,.png,.jpeg"
      :size-limit="{ size: 2, unit: 'MB', message: '图片大小不超过 {sizeLimit} MB' }"
      theme="custom"
      @success="handleSuccess"
      @fail="handleError"
    >
      <div class="image-wrap">
        <add-icon class="add-icon" />
        <div class="tip">仅支持上传 jpg，jpeg,png格式，最大为2MB</div>
      </div>
    </t-upload>
    <div v-show="imgUrl" class="img-box">
      <image-view
        ref="imageViewRef"
        :src="imgUrl"
        :width="126"
        :height="126"
        @edit="handleClickEdit"
        @del="handleClickDelete"
      ></image-view>
    </div>
  </div>
</template>

<style scoped lang="less">
.upload-image {
  position: relative;

  &.disabled {
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(#eee, 0.4);
      z-index: 100;
      cursor: not-allowed;
    }
  }

  .image-wrap {
    width: 126px;
    height: 126px;
    border: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;

    .add-icon {
      font-size: 16px;
    }

    .tip {
      font-size: 12px;
      color: rgb(0 0 0 / 40%);
      padding: 0 14px;
      margin-top: 10px;
      line-height: 16px;
      text-align: center;
    }
  }

  .img-box {
    width: 126px;
    height: 126px;
    position: relative;

    .img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
